<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Raxan Rich Plugins</title>
    <link href="../raxan/styles/master.css" rel="stylesheet" type="text/css" />
    <!--[if IE]><link rel="stylesheet" href="../raxan/styles/master.ie.css" type="text/css" media="screen, projection"><![endif]-->
    <style type="text/css">
        table td {
            vertical-align:top;
        }
    </style>
</head>

<body>

    <div class="container c39">

        <p>&nbsp</p>
        <h1>The Raxan Framework</h1>
        <hr />

        <div class="column panel c8">
            <div class="pb1"></div><div class="pb2"></div><div class="pm1">
                <h5 class="pnl-header">Table of Content</h5>
                <ul class="hlf-pad">
                    <li><a href="index.html">Overview</a></li>
                    <li><a href="getting-started.html">Getting Started</a></li>
                    <li><a href="your-first-page.html">Your First Page</a></li>
                    <li><a href="code-behind.html">Code-Behind Page</a></li>
                    <li><a href="quick-reference-css.html">CSS Framework</a></li>
                    <li><a href="quick-reference-htmlobject.html">Quick Reference</a></li>
                    <li><a href="../css-examples/index.html">Examples</a></li>
					<li class="lightgray"><a href="plugins.html">Rich Plugins</a></li>
                    <li><a href="vision.html">The Vision</a></li>
                    <li><a href="roadmap.html">The Roadmap</a></li>
                    <li><a href="credits.html">Credits/Ackns.</a></li>
                </ul>
            </div><div class="pb2 pb3"></div><div class="pb1 pb4"></div>
        </div>

        <div class="column c29 prepend1">
            <h2>TabStrip Plugin</h2>

            <p>Add tab navigation to a web page or application.</p>

            <p>
                <strong>Syntax:</strong><br />
                $(“…”).tabstrip(options)<br />
                $(“…”).tabstrip(“select”, index)<br />
            </p>

            <p>To include the TabStrip Plugin inside a web page use: <strong>html.include(“rich/tabstrip”)</strong></p>

            <p>
                <strong>tabstrip(options)</strong><br />
                This converts an unordered list into a list of tabs. Each clickable list item must include an anchor tag as shown below:
            </p>

<pre class="lightgray"><code>
    &lt;ul class=&quot;tabstrip&quot;&gt;
        &lt;li&gt;&lt;a href=&quot;#items&quot;&gt;Products&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;selected&quot;&gt;&lt;a href=&quot;#service&quot;&gt;Service&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;

    &lt;div id=&quot;items&quot;&gt;Products Tab container&lt;/div&gt;
    &lt;div id=&quot;service&quot;&gt;Service Tab container&lt;/div&gt;

</code></pre>


        <p>In the above example, the #item and #service anchors are used to represent the ID of the element (such as a div) that should be displayed when the tab is selected.</p>

        <p>To dynamically load content into the tab container when the tab is selected, simply add the url for the web page to the anchor tag as shown below:</p>

<pre class="lightgray"><code>
    &lt;ul class=&quot;tabstrip&quot;&gt;
        &lt;li&gt;&lt;a href=&quot;/myproducts.html#items&quot;&gt;Products&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;

</code></pre>

        <p>To load a specific element from the web page and into the selected tab container, add the css selector for the element to the end of the url as shown below:</p>

<pre class="lightgray"><code>
    &lt;ul class=&quot;tabstrip&quot;&gt;
        &lt;li&gt;&lt;a href=&quot;/myproducts.html#items;div.products&quot;&gt;Products&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;

</code></pre>

        <strong>TabStrip options</strong>
        <table>
            <tr>
                <th>Name</th><th>Description</th>
            </tr>
            <tr>
                <td valign="top">animate</td><td><em>Mixed</em>. Used to enable (true) or disable (false) tab animations. Defaults to true. If a callback function is used as the value for this option, then the plugin will call the function to create custom animations. The callback function will be called with three parameters. The first being the index of the selected tab, while the second and third parameters are jQuery objects that are linked to the current and previous tab containers.</td>
            </tr>
            <tr>
                <td valign="top">theme</td><td><em>String</em>. Used to specify the name of the CSS class to apply to the tabstrip.</td>
            </tr>
            <tr>
                <td valign="top">tabclick</td><td><em>Function</em>. This function will be called whenever a tab is selected. Use the event.data object to retrieve the index and container id. </td>
            </tr>
        </table>

<pre class="lightgray"><code>
    &lt;script type=&quot;text/javascript&quot;&gt;
        html.ready(function(){
            $(&quot;.tabstrip&quot;).tabstrip({
                theme:'nicetab',
                tabclick: function(event) {
                    alert(event.data.index);
                    alert(event.data.container);
                }
            })
        });
    &lt;/script&gt;

</code></pre>

            <hr class="space"/>

            <p>
                <strong>tabstrip(“select”,index)</strong><br />
                Used to select the specified tab index.
            </p>
            <table>
                <tr>
                    <th>Parameter</th><th>Description</th>
                </tr>
                <tr>
                    <td>index</td><td><em>Integer</em>. Tab index ranging from 0 to n-1 tabs, where n is the total number of tabs.</td>
                </tr>
            </table>

            <p>To see the TabStrip Plugin in action visit the <a href="../examples/rich-tabstrip-explorer.html">TabStrip Explorer</a> web page.</p>

        </div>

        <hr />
        <p class="medium">The Rich Ajax Application Framework. Visit <a href="http://raxanpdi.com">http://raxanpdi.com</a></p>

    </div>

</body>

</html>